<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>搜索结果</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var params = getParams();
        var dataArrTravel=[];//合并数据的容器  游记
        var dataArrNews=[];//合并数据的容器  资讯日报
        var currentPage=1;//默认第一页数据
        //游记
        function queryForTravel() {
            //获取私信信息
            $.get("/search/travel/"+ params.keyword,{currentPage:currentPage},function (data) {
                if (data.pageSize!=0) {
                    if(currentPage>=1&&currentPage<=data.pages) {
                        $.merge(dataArrTravel, data.list);//合并数组
                        var json = {
                            list: dataArrTravel
                        }
                        $(".msgTravel").renderValues(json, {
                            getHref: getHref
                        })
                    }
                }else {
                    $("#travelTitle").html("无相关游记")
                }
                if(currentPage>1&&currentPage>=data.pages){
                    $(document).dialog({
                        type : 'notice',
                        infoText: '到底啦！',
                        autoClose: 1000,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                }
            });
        }
        //资讯日报
        function queryForNews() {
            //获取私信信息
            $.get("/search/news/"+ params.keyword,{currentPage:currentPage},function (data) {
                console.log(data);
                if (data.pageSize!=0) {
                    if(currentPage>=1&&currentPage<=data.pages){
                        $.merge(dataArrNews,data.list);//合并数组
                        var json={
                            list:dataArrNews
                        }
                        $(".msgContainer").renderValues(json,{
                            getHref:getHref
                        })
                    }
                }else {
                    console.log(33);
                    $("#newsTitle").html("无相关资讯")
                }
                if(currentPage>1&&currentPage>=data.pages){
                    $(document).dialog({
                        type : 'notice',
                        infoText: '到底啦！',
                        autoClose: 1000,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                }
            });
        }
        $(function () {
            if (params.keyword) {
                //获取攻略,封面,标题
                    $.get('/search/strategy/' + params.keyword,function (data) {
                        if (data.id!=null) {
                            $(".search").renderValues(data,{
                                getHref:getHref
                            });
                        }else {
                            $("#searchMsg").html("无相关攻略")
                        }
                    })
                    queryForTravel();
                    queryForNews();
                }

            $("#pills-catalog-tab").click(function () {//资讯
                $("#clickType").val(1);

            });
            $("#pills-comment-tab").click(function () {//游记
                $("#clickType").val(2);
            });

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if($(document).scrollTop()+$(window).height()>=$(document).height()-1){
                    currentPage++;
                    var val = $("#clickType").val();
                    if(val==1){
                        queryForTravel();
                    }
                    if(val==2){
                        queryForNews();
                    }

                };
            })


            // //本页面的搜索按钮搜索功能
            $("#serachStrsategy").click(function () {
                if ($("#keyword").val() != null&&$("#keyword").val() !='') {
                    window.location.href="search.html?keyword="+$("#keyword").val()
                }
            });
        })
    </script>
</head>

<body>
<!--1:代表当前选中的是  资讯
    2:表示当前选中的是  游记
-->
<input id="clickType" value="1" type="hidden"/>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search" id="serachStrsategy">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略" name="keyword" id="keyword">
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="container search">
    <ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="coverImgUrl" role="tablist">
        <li class="nav-item">
            <a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
                <span style="font-weight: bold;">攻略</span>
            </a>
            <p>
                <a data-href="strategyCatalogs.html?strategyId=" render-key="id" render-fun="getHref">
                    <p render-html="title"></p>
                    <img render-src="coverUrl" width="300px"><br/>
                    <span  id="searchMsg" render-html="place.name"></span>
            </a>
            </p>
        </li>
    </ul>

</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill"  href="#pills-catalog">
            <span>资讯</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>游记</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <input type="hidden" name="currentPage" id="currentPage1" value="1">
        <div class="msgContainer">
            <div render-loop="list">
                <div class="searchNews "  style="margin: 10px;">
                    <a data-href="newsContent.html?news_id=" render-key="list.id" render-fun="getHref">
                        <div class="row">
                            <div class="col-4">
                                <img width="100%" render-src="list.coverImgUrl">
                            </div>
                            <div class="col-8" style="font-size: small">
                                <span id="newsTitle" render-html="list.title" style="font-weight: bolder"></span><br/>
                                </font><span render-html="list.subTitle"></span>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">
        <div class="container">
            <div class="msgTravel">
                <input type="hidden" name="currentPage" id="currentPage2" value="1">
                <div render-loop="list">
                    <div class="searchNews " id="bigger" style="margin: 10px;">
                        <a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">
                            <div class="row">
                                <div class="col-4">
                                    <img width="100%" render-src="list.coverUrl">
                                </div>
                                <div class="col-8" id="travelTitle" render-html="list.title" style="font-size: small">
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>